<template>
  <div class="tableBox">
    <div class="tableBoxBody">
      <div class="tableBody">
        <el-table
          ref="filterTable"
          :key="tableKey"
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          height="500"
        >
          <el-table-column
            label="上传时间"
            min-width="80px"
            align="center"
            prop="time"
            sortable
            column-key="time"
            :default-sort="{prop: 'time', order: 'descending'}"
          >
            <template slot-scope="{row}">
              <span>{{ row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备电量(%)" min-width="30px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.electricQuantity }}</span>
            </template>
          </el-table-column>
          <el-table-column label="保护侧电位" min-width="30px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.i1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="未保护侧电位" min-width="30px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.i2 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="南北地电位梯度" min-width="30px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.i3 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="东西地电位梯度" min-width="30px" align="center">
            <template slot-scope="{row}">
              <span>{{ row.i4 }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="tableFooter">
        <span class="tableFooterTotal">总数：{{ total }}条</span>
        <span class="tableFooterButton">
          <el-button v-waves :loading="downloadLoading" type="primary" icon="el-icon-download" @click="handleDownload">
            导出
          </el-button>
        </span>
      </div>

    </div>
  </div>
</template>

<script>
import { fetchList } from '@/api/dataTable'
import { parseTime } from '@/utils'
import waves from '@/directive/waves' // waves directive
export default {
  name: 'EquipmentTable',
  directives: { waves },
  props: {
    equipmentNumber: {
      type: String,
      default: 'bd16265284510910002'
    },
    date: {
      type: Array
    }
  },
  data() {
    return {
      listQuery: {
        date: this.date,
        equipmentNumber: this.equipmentNumber
      },
      downloadLoading: false,
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      temp: {
        time: '',
        electricQuantity: '',
        i1: '',
        i2: '',
        i3: '',
        i4: ''
      }
    }
  },
  watch: {
    equipmentNumber() {
      this.listQuery.equipmentNumber = this.equipmentNumber
      this.getList()
    },
    date() {
      this.listQuery.date = this.date
      this.getList()
    }
  },
  created() {
    this.getList()
  },
  methods: {
    formatter(row, column) {
      return row.address
    },
    getList() {
      this.listLoading = false
      fetchList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['time', 'electricQuantity', 'i1', 'i2', 'i3', 'i4']
        const filterVal = ['time', 'electricQuantity', 'i1', 'i2', 'i3', 'i4']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'table-list'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.list.map(v => filterVal.map(j => {
        if ((j === 'additionTime') || (j === 'patrolInspectionTime') || (j === 'onlineTime')) {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>

<style scoped>
.tableBox{
  display: flex;
  flex-direction: column;
}
.tableFooterButton{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 10px;
}
.tableFooterTotal{
  margin: 10px;
}
/*#tab-EquipmentLineChart {*/
/*  color: #b3efff;*/
/*}*/
/*#tab-EquipmentTable {*/
/*  color: #b3efff;*/
/*}*/
</style>
